//引入重置样式和公共样式
@import"../../assets/css/reset.css";
@import"../../assets/css/common.css";
@import"../../assets/libs/swiper/swiper-bundle.min.css";
//轮播图
.swiper {
    width: 100%;
    height: 680px;

    .swiper-wrapper .bg1 {
        background-image: url("../../assets/imgs/banner1.png");
        background-size: cover; //自适应撑大
        background-position: center;
        background-repeat: no-repeat;
    }

    .swiper-wrapper .bg2 {
        background-image: url("../../assets/imgs/banner2.png");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    .swiper-wrapper .bg3 {
        background-image: url("../../assets/imgs/banner3.png");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
}

main{
    //海量API
    .veryAPI{
        height: 685px;
        width: 100%;
        background-image: url(../../assets/imgs/more-api-bg.svg);
        background-color: rgb(248, 249, 251);
        .veryAPIContent{
            height: 100%;
            background-color: #fff;
            padding:80px 0 0px 0;
            // background-color: rgb(125, 85, 85);

        }
        ul{
            width: 100%;
            height: 300px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            li{
                height: 135px;
                width: 220px;
                // background-color: rgb(82, 167, 78);
                position: relative;
                box-shadow: 0px 1px 5px blue;
                div{
                    height: 65px;
                    width: 65px;
                    // background-color: rgb(188, 58, 58);
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%,-50%);
                    // span{
                    //     display: inline-block;
                    //     height: 36px;
                    //     width: 36px;
                    //     background-image: url(../../assets/imgs/api01.svg);
                    //     background-repeat: no-repeat;
                    // }
                    p{
                        font-size: 14px;
                    } 
                }
                // .span2{
                //     background-image: url(../../assets/imgs/api02.svg);
                // }
                // .span3{
                //     background-image: url(../../assets/imgs/api03.svg);
                // }
                // .span4{
                //     background-image: url(../../assets/imgs/api04.svg);
                // }
                // .span5{
                //     background-image: url(../../assets/imgs/api05.svg);
                // }
                // .span6{
                //     background-image: url(../../assets/imgs/api06.svg);
                // }
                // .span7{
                //     background-image: url(../../assets/imgs/api07.svg);
                // }
                // .span8{
                //     background-image: url(../../assets/imgs/api08.svg);
                // }
                // .span9{
                //     background-image: url(../../assets/imgs/apic1.svg);
                // }
                // .span10{
                //     background-image: url(../../assets/imgs/apic2.svg);
                // }

            }
            //第一个hover
            // li:nth-child(1):hover{
            //     background-color: pink;
            //     color: #fff;
            //     span{
            //         background-image: url(../../assets/imgs/api01-c.svg);
            //     }
            // }
           
        }


    }
}